<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/style/public/publicStyle.js"></script>
</head>

<body>
<!--表格-->
<div class="weadmin-body">
    <div class="layui-form" lay-filter="sysFormFilter" style="margin-top: 10px">
        <label class="layui-form-label">数据库类型</label>
        <div class="layui-input-inline">
            <select id="dbType" lay-filter="dbType" style="height: 33px; width: 103px; border-radius: 6px; font-size: initial;">
                <option value="mysql" selected>mysql</option>
                <option value="oracle">oracle</option>
                <option value="sqlserver">sqlserver</option>
                <option value="postgrey sql">postgrey sql</option>
                <option value="greenplum">greenplum</option>
                <option value="hadoop">hadoop</option>
            </select>
        </div>
    </div>
    <div class="layui-row">
        <table class="layui-hide" id="tableDataList" lay-filter="usertab"></table>
    </div>
</div>

<!--表格操作-->
<script type="text/html" id="op">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <!--	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>-->
</script>


<div class="layui-row" id="tableForm" style="display:none;">
    <div class="layui-col-md12">
        <form class="layui-form layui-from-pane" id="formId" style="margin-top:20px" lay-filter="tableForm">
            <input type="hidden" name="idDbTpcomp"/>
            <div class="layui-form-item">
                <label class="layui-form-label">标准类型</label>
                <div class="layui-input-block">
                    <input name="naJavatp" type="text" disabled="disabled" class="layui-input">
                    <input name="idDbTpcomp" type="hidden">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段类型</label>
                <div class="layui-input-block">
                    <input type="text" name="euFldtp" required lay-verify="required" autocomplete="off"
                           placeholder="请输入字段类型" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可设置长度/精度</label>
                <div class="layui-input-block">
                    <select name="euUsePrecision" lay-filter="euUsePrecision">
                        <option value="1">可设置</option>
                        <option value="0" selected="">不可设置</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" type="button" id="submitSave" lay-filter="demo11">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var util = layui.util;
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , form = layui.form;
        var logintoken = null;
        getSharreTieba_LoginToken();
        table.render({
            elem: '#tableDataList'
            , id: 'tableDataList'
            , even: true //开启隔行背景
            , cellMinWidth: 80
            , where: {dbType: $("#dbType").val()}
            , url: global_visit_url_prefix + '/etl/baseDbTpcomp/find'
            , cols: [[
                , {field: 'idDbTpcomp', title: 'ID', hide: true}
                , {field: 'euDbtp', title: '数据库类型', width: 80}
                , {field: 'naJavatp', title: '标准类型'}
                , {field: 'euJavatp', title: '标准类型', hide: true}
                , {field: 'euFldtp', title: '字段类型'}
                , {
                    field: 'euUsePrecision', title: '可设置长度/精度', templet: function (d) {
                        if (d.euUsePrecision == "1") {
                            return "可设置";
                        } else {
                            return "不可设置";
                        }
                    }
                }
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#op'}
            ]]
        });

        layui.$("#dbType").on('change', function () {
            table.reload("tableDataList", {where: {dbType: $("#dbType").val()}})
        });
//监听行工具事件
        table.on('tool(usertab)', function (obj) { //注：tool 是工具条事件名，usertab 是 table 原始容器的属性 lay-filter="对应的值"

            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == 'edit') {
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "编辑数据源",
                    area: ['520px', '370px'],
                    content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                setFormValue(obj, data);
            } else if (layEvent == 'delete') {
                layer.confirm('确定数据源要删除数据源' + data.na + '吗？', {
                    btn: ['确定', '取消'], //按钮
                }, function () {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: "get",
                        url: "/etl/baseDbTpcomp/delete",
                        async: true,
                        data: {'idDbTpcomp': data.idDbTpcomp},
                        success: function (json) {
                            table.reload("tableDataList");
                        }
                    });
                });
            }
        });

//监听修改操作
        /*table.on('edit(usertab)', function(obj){

            var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
            console.log(data);

            $.ajax({
                type:"POST",
                url:"/etl/baseDbTpcomp/update",
                async:true,
                data:{'user':JSON.stringify(data)},
                success:function(json){

                }
            });
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });*/

//监听表头
        table.on('toolbar(usertab)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增数据源",
                        area: ['520px', '530px'],
                        content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    setFormValue(obj, null);
                    break;
            }
            ;
        });

        //监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setFormValue(obj, data) {
            if (data == null) {
                $("#formId")[0].reset();
            } else {
                form.val("tableForm", data);
            }
        }

        layui.$("#submitSave").on("click", function () {
            $.ajax({
                url: '/etl/baseDbTpcomp/save',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(form.val('tableForm')),
                success: function (msg) {
                    table.reload("tableDataList", {where: {dbType: $("#dbType").val()}})
                    layer.closeAll();//关闭所有的弹出层

                }
            })
        })

    });


</script>
</body>

</html>